تنسيقات CSS الحديثة: نظرة معمقة على استعلامات الحاوية

لسنوات، كانت استعلامات الوسائط (media queries) حجر الزاوية في تصميم الويب المتجاوب. فهي تسمح لنا بتكييف تخطيطاتنا بناءً على حجم منفذ العرض (viewport). ومع ذلك، تعمل استعلامات الوسائط على أبعاد نافذة المتصفح، مما قد يؤدي أحيانًا إلى مواقف محرجة، خاصة عند التعامل مع المكونات القابلة لإعادة الاستخدام. وهنا يأتي دور استعلامات الحاوية (Container Queries) – وهي ميزة CSS ثورية تسمح للمكونات بالتكيف بناءً على حجم العنصر الحاوي لها، وليس منفذ العرض بأكمله.

ما هي استعلامات الحاوية؟

استعلامات الحاوية، المدعومة رسميًا من قبل معظم المتصفحات الحديثة، توفر نهجًا أكثر تفصيلاً وتركيزًا على المكونات للتصميم المتجاوب. فهي تمكّن المكونات الفردية من تعديل مظهرها وسلوكها بناءً على أبعاد حاويتها الرئيسية، بشكل مستقل عن حجم منفذ العرض. وهذا يسمح بمرونة أكبر وإمكانية إعادة استخدام أفضل، خاصة عند العمل مع تخطيطات معقدة وأنظمة تصميم.

تخيل مكون بطاقة يحتاج إلى أن يُعرض بشكل مختلف اعتمادًا على ما إذا كان موضوعًا في شريط جانبي ضيق أو في منطقة محتوى رئيسية واسعة. مع استعلامات الوسائط، سيتعين عليك الاعتماد على حجم منفذ العرض وربما تكرار قواعد CSS. أما مع استعلامات الحاوية، فيمكن لمكون البطاقة التكيف بذكاء بناءً على المساحة المتاحة داخل حاويته.

لماذا نستخدم استعلامات الحاوية؟

فيما يلي تفصيل للمزايا الرئيسية لاستخدام استعلامات الحاوية:

• تحسين قابلية إعادة استخدام المكونات: تصبح المكونات مستقلة تمامًا ويمكن إعادة استخدامها بسلاسة عبر أجزاء مختلفة من موقعك أو تطبيقك دون الحاجة إلى ربطها بإحكام بأحجام منافذ عرض محددة. فكر في بطاقة مقال إخباري: يمكن عرضها بشكل مختلف في عمود جانبي مقابل النص الرئيسي، فقط بناءً على عرض العمود الحاوي لها.
• تخطيطات أكثر مرونة: تتيح استعلامات الحاوية تخطيطات أكثر دقة وتكيفًا، خاصة عند التعامل مع التصميمات المعقدة حيث تحتاج المكونات إلى الاستجابة بشكل مختلف اعتمادًا على سياقها. خذ على سبيل المثال صفحة قائمة منتجات في متجر إلكتروني. يمكنك تغيير عدد العناصر في كل صف ليس بناءً على عرض *الشاشة*، ولكن بناءً على عرض *حاوية قائمة المنتجات* التي قد تختلف هي نفسها.
• تقليل تضخم CSS: من خلال تغليف منطق الاستجابة داخل المكونات، يمكنك تجنب تكرار قواعد CSS وإنشاء أوراق أنماط أكثر قابلية للصيانة والتنظيم. بدلاً من وجود استعلامات وسائط متعددة تستهدف أحجام منافذ عرض محددة لكل مكون، يمكنك تحديد سلوك الاستجابة مباشرةً داخل CSS الخاص بالمكون.
• تجربة مستخدم أفضل: من خلال تصميم عرض المكونات لتناسب سياقها المحدد، يمكنك إنشاء تجربة مستخدم أكثر اتساقًا وبديهية عبر مختلف الأجهزة وأحجام الشاشات. على سبيل المثال، يمكن لقائمة التنقل أن تتحول إلى شكل أكثر إحكامًا داخل حاوية أصغر، مما يحسن من استغلال المساحة وسهولة الاستخدام.
• قدرات محسّنة لأنظمة التصميم: تعد استعلامات الحاوية أداة قوية لبناء أنظمة تصميم قوية وقابلة للتكيف، مما يتيح لك إنشاء مكونات قابلة لإعادة الاستخدام تتكامل بسلاسة في سياقات وتخطيطات مختلفة.

البدء مع استعلامات الحاوية

يتضمن استخدام استعلامات الحاوية بضع خطوات رئيسية:

1. تحديد الحاوية: تعيين عنصر كـحاوية باستخدام خاصية `container-type`. هذا يحدد الحدود التي سيعمل ضمنها الاستعلام.
2. تحديد الاستعلام: تحديد شروط الاستعلام باستخدام القاعدة `@container`. هذا مشابه لـ `@media`، ولكن بدلاً من خصائص منفذ العرض، ستقوم بالاستعلام عن خصائص الحاوية.
3. تطبيق الأنماط: تطبيق الأنماط التي يجب تطبيقها عند استيفاء شروط الاستعلام. ستؤثر هذه الأنماط فقط على العناصر الموجودة داخل الحاوية.

1. إعداد الحاوية

الخطوة الأولى هي تحديد العنصر الذي سيعمل كحاوية. يمكنك استخدام خاصية `container-type` لهذا الغرض. هناك العديد من القيم الممكنة:

• `size`: ستتتبع الحاوية كلاً من الأبعاد المضمنة (العرض) والكتلية (الارتفاع).
• `inline-size`: ستتتبع الحاوية فقط بعدها المضمن (عادةً العرض). هذا هو الخيار الأكثر شيوعًا والأفضل من حيث الأداء.
• `normal`: العنصر ليس حاوية استعلام (الافتراضي).

إليك مثال:

            
.card-container {
  container-type: inline-size;
}

            

              
                Copy
              
            
          

في هذا المثال، تم تعيين العنصر `.card-container` كحاوية تتتبع حجمها المضمن (العرض).

2. تحديد استعلام الحاوية

بعد ذلك، ستقوم بتعريف الاستعلام نفسه باستخدام القاعدة `@container`. هذا هو المكان الذي تحدد فيه الشروط التي يجب استيفاؤها لتطبيق الأنماط داخل الاستعلام.

إليك مثال بسيط يتحقق مما إذا كان عرض الحاوية لا يقل عن 500 بكسل:

            
@container (min-width: 500px) {
  .card {
    flex-direction: row; /* Change the card layout */
  }
}

            

              
                Copy
              
            
          

في هذا المثال، إذا كان عرض العنصر `.card-container` لا يقل عن 500 بكسل، فسيتم تعيين `flex-direction` للعنصر `.card` إلى `row`.

يمكنك أيضًا استخدام `max-width`، `min-height`، `max-height`، وحتى دمج شروط متعددة باستخدام عوامل منطقية مثل `and` و `or`.

            
@container (min-width: 300px) and (max-width: 700px) {
  .card-title {
    font-size: 1.2em;
  }
}

            

              
                Copy
              
            
          

يطبق هذا المثال الأنماط فقط عندما يكون عرض الحاوية بين 300 بكسل و 700 بكسل.

3. تطبيق الأنماط

ضمن القاعدة `@container`، يمكنك تطبيق أي أنماط CSS تريدها على العناصر الموجودة داخل الحاوية. سيتم تطبيق هذه الأنماط فقط عند استيفاء شروط الاستعلام.

إليك مثال كامل يجمع كل الخطوات:

            
<div class="card-container">
  <div class="card">
    <h2 class="card-title">Product Title</h2>
    <p class="card-description">A brief description of the product.</p>
    <a href="#" class="card-button">Learn More</a>
  </div>
</div>

            

              
                Copy
              
            
          

            
.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  padding: 1em;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-title {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.card-button {
  background-color: #007bff;
  color: white;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 5px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
    align-items: flex-start;
  }

  .card-title {
    font-size: 1.8em;
  }
}

            

              
                Copy
              
            
          

في هذا المثال، عندما يكون عرض `.card-container` لا يقل عن 500 بكسل، سيتحول العنصر `.card` إلى تخطيط أفقي، وسيزداد حجم `.card-title`.

أسماء الحاوية

يمكنك إعطاء أسماء للحاويات باستخدام `container-name: my-card;`. يتيح لك هذا أن تكون أكثر تحديدًا في استعلاماتك، خاصة إذا كان لديك حاويات متداخلة.

            
.card-container {
  container-type: inline-size;
  container-name: my-card;
}

@container my-card (min-width: 500px) {
  /* Styles applied when the container named "my-card" is at least 500px wide */
}

            

              
                Copy
              
            
          

هذا مفيد بشكل خاص عندما يكون لديك حاويات متعددة في الصفحة، وتريد استهداف حاوية معينة باستعلاماتك.

وحدات استعلام الحاوية

تمامًا كما هو الحال مع استعلامات الوسائط، فإن لاستعلامات الحاوية وحداتها الخاصة التي تكون نسبية للحاوية. وهي:

• `cqw`: 1% من عرض الحاوية.
• `cqh`: 1% من ارتفاع الحاوية.
• `cqi`: 1% من الحجم المضمن للحاوية (العرض في أوضاع الكتابة الأفقية).
• `cqb`: 1% من حجم الكتلة للحاوية (الارتفاع في أوضاع الكتابة الأفقية).
• `cqmin`: القيمة الأصغر بين `cqi` أو `cqb`.
• `cqmax`: القيمة الأكبر بين `cqi` أو `cqb`.

هذه الوحدات مفيدة لتحديد الأحجام والمسافات التي تكون نسبية للحاوية، مما يعزز مرونة تخطيطاتك بشكل أكبر.

            
.element {
  width: 50cqw;
  font-size: 2cqmin;
}

            

              
                Copy
              
            
          

أمثلة عملية وحالات استخدام

فيما يلي بعض الأمثلة الواقعية لكيفية استخدام استعلامات الحاوية لإنشاء مكونات أكثر تكيفًا وقابلية لإعادة الاستخدام:

1. قائمة تنقل متجاوبة

يمكن لقائمة التنقل تكييف تخطيطها بناءً على المساحة المتاحة في حاويتها. في حاوية ضيقة، قد تتقلص إلى قائمة همبرغر، بينما في حاوية أوسع، يمكنها عرض جميع عناصر القائمة أفقيًا.

2. قائمة منتجات تكيفية

يمكن لقائمة منتجات في متجر إلكتروني تعديل عدد المنتجات المعروضة في كل صف بناءً على عرض حاويتها. في حاوية أوسع، يمكنها عرض المزيد من المنتجات في كل صف، بينما في حاوية أضيق، يمكنها عرض عدد أقل من المنتجات لتجنب الازدحام.

3. بطاقة مقال مرنة

يمكن لبطاقة مقال تغيير تخطيطها بناءً على المساحة المتاحة. في شريط جانبي، قد تعرض صورة مصغرة ووصفًا موجزًا، بينما في منطقة المحتوى الرئيسية، يمكنها عرض صورة أكبر وملخصًا أكثر تفصيلاً.

4. عناصر نماذج ديناميكية

يمكن لعناصر النماذج تكييف حجمها وتخطيطها بناءً على الحاوية. على سبيل المثال، قد يكون شريط البحث أوسع في رأس الموقع وأضيق في الشريط الجانبي.

5. ودجات لوحة التحكم

يمكن لودجات لوحة التحكم تعديل محتواها وعرضها بناءً على حجم حاويتها. قد يعرض ودجت رسم بياني المزيد من نقاط البيانات في حاوية أكبر وعددًا أقل من نقاط البيانات في حاوية أصغر.

اعتبارات عالمية

عند استخدام استعلامات الحاوية، من المهم مراعاة الآثار العالمية لخيارات التصميم الخاصة بك.

• التوطين (Localization): تأكد من أن تخطيطاتك تتكيف برشاقة مع اللغات المختلفة واتجاهات النص. قد تتطلب بعض اللغات مساحة أكبر من غيرها، لذلك من المهم تصميم تخطيطات مرنة يمكنها استيعاب أطوال النصوص المختلفة.
• إمكانية الوصول (Accessibility): تأكد من أن استعلامات الحاوية الخاصة بك لا تؤثر سلبًا على إمكانية الوصول. اختبر تخطيطاتك باستخدام التقنيات المساعدة للتأكد من أنها تظل قابلة للاستخدام للأشخاص ذوي الإعاقة.
• الأداء: بينما توفر استعلامات الحاوية مرونة كبيرة، من المهم استخدامها بحكمة. يمكن أن يؤثر الإفراط في استخدام استعلامات الحاوية سلبًا على الأداء، خاصة في التخطيطات المعقدة.
• لغات من اليمين إلى اليسار (RTL): عند التصميم للغات RTL مثل العربية أو العبرية، تأكد من أن استعلامات الحاوية الخاصة بك تتعامل بشكل صحيح مع انعكاس التخطيط. قد تحتاج خصائص مثل `margin-left` و `margin-right` إلى تعديل ديناميكي.

دعم المتصفحات والـ Polyfills

تتمتع استعلامات الحاوية بدعم جيد في المتصفحات الحديثة، بما في ذلك Chrome و Firefox و Safari و Edge. ومع ذلك، إذا كنت بحاجة إلى دعم المتصفحات القديمة، فيمكنك استخدام polyfill مثل @container-style/container-query. يضيف هذا الـ polyfill دعمًا لاستعلامات الحاوية إلى المتصفحات التي لا تدعمها أصلاً.

قبل استخدام استعلامات الحاوية في بيئة الإنتاج، من الجيد دائمًا التحقق من دعم المتصفح الحالي والتفكير في استخدام polyfill إذا لزم الأمر.

أفضل الممارسات

فيما يلي بعض أفضل الممارسات التي يجب مراعاتها عند العمل مع استعلامات الحاوية:

• ابدأ بالهاتف المحمول أولاً: صمم تخطيطاتك للحاويات الصغيرة أولاً ثم استخدم استعلامات الحاوية لتحسينها للحاويات الأكبر. يضمن هذا النهج تجربة مستخدم جيدة على جميع الأجهزة.
• استخدم أسماء حاويات ذات معنى: استخدم أسماء حاويات وصفية لجعل التعليمات البرمجية الخاصة بك أكثر قابلية للقراءة والصيانة.
• اختبر بدقة: اختبر تخطيطاتك في متصفحات وأحجام شاشات مختلفة للتأكد من أن استعلامات الحاوية تعمل كما هو متوقع.
• اجعلها بسيطة: تجنب إنشاء استعلامات حاوية معقدة للغاية. كلما زادت تعقيدات استعلاماتك، كان من الصعب فهمها وصيانتها.
• ضع الأداء في الاعتبار: على الرغم من أن استعلامات الحاوية توفر مرونة كبيرة، فمن المهم الانتباه إلى الأداء. تجنب استخدام عدد كبير جدًا من استعلامات الحاوية في صفحة واحدة، وقم بتحسين CSS لتقليل التأثير على أداء العرض.

استعلامات الحاوية مقابل استعلامات الوسائط: مقارنة

بينما تُستخدم كل من استعلامات الحاوية واستعلامات الوسائط للتصميم المتجاوب، إلا أنهما تعملان بمبادئ مختلفة وهما الأنسب لسيناريوهات مختلفة.

بشكل عام، تعد استعلامات الحاوية أفضل لتكييف المكونات الفردية مع سياقها، بينما تعد استعلامات الوسائط أفضل لتكييف التخطيط العام مع أحجام الشاشات المختلفة. يمكنك حتى الجمع بينهما للحصول على تخطيطات أكثر تعقيدًا.

مستقبل تنسيقات CSS

تمثل استعلامات الحاوية خطوة مهمة إلى الأمام في تطور تنسيقات CSS. من خلال تمكين المكونات من التكيف بناءً على حاويتها، فإنها تتيح تعليمات برمجية أكثر مرونة وقابلية لإعادة الاستخدام والصيانة. مع استمرار تحسن دعم المتصفحات، من المتوقع أن تصبح استعلامات الحاوية أداة أساسية لمطوري الواجهة الأمامية.

الخاتمة

تعد استعلامات الحاوية إضافة قوية إلى مشهد CSS، حيث تقدم نهجًا أكثر تركيزًا على المكونات للتصميم المتجاوب. من خلال فهم كيفية عملها وكيفية استخدامها بفعالية، يمكنك إنشاء تطبيقات ويب أكثر تكيفًا وقابلية لإعادة الاستخدام والصيانة. احتضن استعلامات الحاوية وافتح مستوى جديدًا من المرونة في تنسيقات CSS الخاصة بك!